<template>
  <div class="aid">
    <div class="base">
      <a-modal v-if="previewVisible" :visible="previewVisible" :width="816" :footer="null" @cancel="previewVisible=false">
        <div style="height: 24px;"></div>
        <div style="width: 768px;">
          <img style="width: 100%" :src="previewImage" />
        </div>
      </a-modal>
      <p>流转记录
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <div class="box" v-if="recordList.length > 0">
        <a-timeline style="padding-top: 10px;overflow-y: auto;">
          <a-timeline-item v-for="(v,i) of recordList" :key="i">
            <h4 class="gj">
              <div class="tit">流转情况：</div>
              <div class="followContent" v-if="v.OldFollowUserName">
                <a-tag color="orange" v-if="v.State == 2">分配</a-tag><a-tag color="blue" v-if="v.State == 3">跟进中</a-tag><a-tag color="green" v-if="v.State == 4">已完成</a-tag><a-tag color="red" v-if="v.State == 5">被驳回</a-tag><a-tag color="cyan" v-if="v.State == 6">已回访</a-tag>由【{{ v.OldFollowUserName }}】分配给【{{ v.NowFollowUserName }}】
              </div>
              <div class="followContent" v-else>
                <a-tag color="orange" v-if="v.State == 2">分配</a-tag><a-tag color="blue" v-if="v.State == 3">跟进中</a-tag><a-tag color="green" v-if="v.State == 4">已完成</a-tag><a-tag color="red" v-if="v.State == 5">被驳回</a-tag><a-tag color="cyan" v-if="v.State == 6">已回访</a-tag>由【{{ v.AboutUserName }}】{{ v.State == 2?'分配给':v.State == 3?'跟进':v.State == 4?'完成':v.State == 5?'驳回给':v.State == 6?'回访':'' }}<span
                  v-if="v.State != 3 && v.State != 4 && v.State != 6"
                >【{{ v.NowFollowUserName }}】</span>
              </div>
            </h4>
            <h4 class="gj" style="display: flex">
              <div>
                <div class="tit">{{ v.State == 2?'分配原因':v.State == 3?'跟进内容':v.State == 4?'完成内容':v.State == 5?'驳回原因':v.State == 6?'回访内容':'' }}：</div>
                <div class="cell" v-if="v.Content">{{ v.State !=6?v.Content:'已解决' }}</div>
                <div class="cell" v-else>{{ v.State==2?'接听分配':v.State == 6?'已解决':'' }}</div>
              </div>
            </h4>
            <h4 class="gj" style="display: flex">
              <div>
                <div class="tit">{{ v.State == 2?'分配时间':v.State == 3?'跟进时间':v.State == 4?'完成时间':v.State == 5?'驳回时间':v.State == 6?'回访时间':'' }}：</div>
                <div class="cell">{{ v.AddTime }}</div>
              </div>
            </h4>
            <h4 class="gj" style="display: flex" v-if="v.State == 3">
              <div>
                <div class="tit">跟进方式：</div>
                <div class="cell">{{ v.FollowType }}</div>
              </div>
            </h4>
            <h4 v-if="v.AttachList.length">跟进凭证：</h4>
            <div class="imgArea" v-for="(_v) of v.AttachList" :key="_v.ID">
              <img :src="imgUrl+_v.Path" style="width: 100%;height: 100%;">
              <div class="imgHandlerArea">
                <a-icon type="eye" style="color: #fff;line-height: 104px;cursor: pointer;" @click="lookImgHandler(_v)" />
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
        <!-- <a-anchor :target-offset="targetOffset">
          <a-anchor-link :href="'#'+item.Tips" :title="item.Tips" v-for="(item,index) in recordList">
            <a-anchor-link :href="'#'+item.Content" :title="'跟进内容：'+item.Content" />
            <a-anchor-link :href="'#'+item.Content" :title="'跟进凭证：'+item.Content" />
            <a-anchor-link :href="'#'+item.AddTime" :title="item.AddTime" />
          </a-anchor-link>
        </a-anchor> -->
      </div>
      <div v-else>
        <a-result title="暂无记录!">
          <template #icon>
            <a-icon type="smile" theme="twoTone" />
          </template>
        </a-result>
      </div>
    </div>
  </div>
</template>

<script>
	import {
		getRecord
	} from '@/api/follow'

	export default {
		props: {
			messageID: String,
			nowTime: String
		},
		watch: {
			nowTime: function(text) {
				console.log(text)
				this._getRecord({messageID: this.messageID})
			}
		},
		data() {
			return {
				recordList: [],
				targetOffset: undefined,
				previewVisible: false,
				previewImage: [],
				imgUrl: 'http://api.400.hj.acxk.net'
			}
		},
		mounted() {
			this.targetOffset = window.innerHeight / 2
		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun', flag)
			},
			lookImgHandler(item) {
				this.previewImage = this.imgUrl + item.Path
				this.previewVisible = true
			},
			async _getRecord(data) {
				let res = await getRecord(data)
				this.recordList = res.data.result
			}
		}
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.box {
		margin: 20px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}
	.box{
		overflow-y: scroll;
		height: 560px;
	}
	.base {
		position: fixed;
		width: 600px;
		height: 640px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -320px;
		overflow-y: hidden;
		border-radius: 8px;

		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;

		.closeCircle {
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
<<<<<<< HEAD
	.gj{
		overflow:hidden;
		.tit{
			float:left;
			width:70px;
		}
		.followContent {
			width:600px;
			float:left;
			white-space: pre-line;
		}
		.cell{
			width:140px;
			float:left;
		}
	}
	.imgArea {
	    border: 1px solid #d9d9d9;
	    border-radius: 6px;
	    margin: 0 12px 12px 0;
	    width: 104px;
	    height: 104px;
	    position: relative;
	    display: inline-block;
	
	    .imgHandlerArea {
	        position: absolute;
	        top: 0;;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        background-color: transparent;
	        transition: all .4s;
	        font-size: 20px;
	        text-align: center;
	        z-index: -1;
	    }
	
	    &:hover {
	        .imgHandlerArea {
	            background-color: rgba(0, 0, 0, .5);
	            z-index: 2;
	        }
	    }
=======

	.gj {
		overflow: hidden;

		.tit {
			float: left;
			width: 70px;
		}

		.followContent {
			width: 600px;
			float: left;
			white-space: pre-line;
		}

		.cell {
			width: 140px;
			float: left;
		}
	}

	.imgArea {
		border: 1px solid #d9d9d9;
		border-radius: 6px;
		margin: 0 12px 12px 0;
		width: 104px;
		height: 104px;
		position: relative;
		display: inline-block;

		.imgHandlerArea {
			position: absolute;
			top: 0;
			;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
			transition: all .4s;
			font-size: 20px;
			text-align: center;
			z-index: -1;
		}

		&:hover {
			.imgHandlerArea {
				background-color: rgba(0, 0, 0, .5);
				z-index: 2;
			}
		}
>>>>>>> 7452c05a294073745fcba8d50ebbd452a3ceaf65
	}
</style>
